body {
    font-family: PingFangSC-Light,'helvetica neue','hiragino sans gb',tahoma,
                     'microsoft yahei ui','microsoft yahei',simsun,sans-serif;
}

.time-input {
  width: 120px;
  height: 25px;
  border-radius: 5px;
}

.startButton {
	-moz-box-shadow: 3px 4px 0 0 #bbdaf7;
	-webkit-box-shadow: 3px 4px 0 0 #bbdaf7;
	box-shadow: 3px 4px 0 0 #bbdaf7;
	background-color:#79bbff;
	-moz-border-radius:18px;
	-webkit-border-radius:18px;
	border-radius:18px;
	border:1px solid #84bbf3;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family: Arial;
	font-size:12px;
	padding:5px 16px;
	text-decoration:none;
	text-shadow:0 1px 0 #528ecc;
}
.startButton:hover {
	background-color:#378de5;
}
.startButton:active {
	position:relative;
	top:1px;
}

.workButton {
	-moz-box-shadow:inset 0 1px 0 0 #f7c5c0;
	-webkit-box-shadow:inset 0 1px 0 0 #f7c5c0;
	box-shadow:inset 0 1px 0 0 #f7c5c0;
	background-color:#fc8d83;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #d83526;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	padding:6px 7px;
	text-decoration:none;
	text-shadow:0 1px 0 #b23e35;
}
.workButton:hover {
	background-color:#e4685d;
}
.workButton:active {
	position:relative;
	top:1px;
}


.restButton {
	-moz-box-shadow:inset 0 1px 0 0 #fce2c1;
	-webkit-box-shadow:inset 0 1px 0 0 #fce2c1;
	box-shadow:inset 0 1px 0 0 #fce2c1;
	background-color:#ffc477;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #eeb44f;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	padding:6px 7px;
	text-decoration:none;
	text-shadow:0 1px 0 #cc9f52;
}
.restButton:hover {
	background-color:#fb9e25;
}
.restButton:active {
	position:relative;
	top:1px;
}

.pomodoro {
	background-color:#44c767;
	-moz-border-radius:28px;
	-webkit-border-radius:28px;
	border-radius:28px;
	border:1px solid #18ab29;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:17px;
	padding:6px 7px;
	text-decoration:none;
	text-shadow:0px 1px 0px #2f6627;
}
.pomodoro:hover {
	background-color:#5cbf2a;
}
.pomodoro:active {
	position:relative;
	top:1px;
}

.helpButton {
    background: #000;
    padding: 5px 10px;
    margin-left: 10px;
    color: #fff;
    cursor: pointer;
    border-radius: 3px;
}

.usage {
    position: fixed;
    font-size: 16px;
    background: #fff;
    width: 400px;
    height: 400px;
    padding: 20px;
    margin: 10px 0 0 50px;
    display: none;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

.alert-info {
    background: #bddcfa;
    display: block;
    padding: 10px 40px;
    text-align:center;
    width: 40%;
    margin: auto;
}

.timer {
    height: 85%;
    width: 100%;
    padding: 0;
    margin: 0;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: FranklinGothic, Verdana, Arial, sans-serif;
    font-size: 120px;
    font-weight: bold;
    color: #000;
}

.quote {
    font-size:18px;
    width: 100%;
    position: fixed;
    bottom: 20px;
    text-align: center;
}

.footer {
  position: fixed;
  bottom: 10px;
  right: 10px;
  text-align: center;
  padding: 10px;
  border: 1px solid #d5d5d5;
}

/* responsive media queries */

@media (min-width: 280px) {
    .timer {
        font-size: 70px;
    }
    .alert-info {
        margin-top: 80px;
    }

    .github, .quote {
        display: none;
    }
}

@media (min-width: 768px) {
    .timer {
        font-size: 100px;
    }

    .github, .quote {
        display: block;
    }
}

@media (min-width: 980px) {
    .timer {
        font-size: 120px;
    }

    .github, .quote {
        display: block;
    }
}

@media (min-width: 1200px) {
    .timer {
        font-size: 150px;
    }

    .github, .quote {
        display: block;
    }
}